<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/jsp/common/common.jsp" %>
<script src="<%=basePath%>/static/js/highcharts.js"></script>
<script src="<%=basePath%>/static/js/highcharts-3d.js"></script>
<script src="<%=basePath%>/static/js/highcharts-more.js"></script>
<script src="<%=basePath%>/static/js/solid-gauge.js"></script>
</head>
<body>

<div class="documentContent"  id="documentContent">
	<div class="top-div"><em></em><span>&nbsp;>&nbsp;系统监控&nbsp;>&nbsp;数据库连接池</span></div>
	
	<div style="padding-left: 20px;padding-top: 10px;">
        <select class="table-input" id="poolName" name="poolName" style="width: 30%;"></select>
	</div>
	
	<div class="panel-block" style="width: 19%">
		<div name="gcdiv" style="background-color: #2aca76;color: white;">
			<span style="display: block;font-size: 25px;padding-top:20px; margin-left: 10px;" id="poolNameSpan"></span>
			<span style="display: block;font-size: 25px;margin-top: 20px;text-align: center;">
				最大空闲连接: <span id="maxActiveSpan">0</span>
			</span>
			<span style="display: block;font-size: 25px;margin-top: 20px;text-align: center;">
				最大活动链接: <span id="maxIdleSpan">0</span>
			</span>
		</div>
	</div>
	
	<div class="panel-block" style="width: 77.5%">
		<div id="connectionPoolDiv"></div>
	</div>
	
	
	
	
</div>

<script type="text/javascript">
$(document).ready(function(){
	
	var bodyHt = document.documentElement.clientHeight;
	$('body').find('div[class="panel-block"]').height(bodyHt - 310);
	
	getPageData();
	
	initConnectionPoolDiv();
	
});


function getPageData(){
 	var url = '<%=basePath%>/webframework/monitor/connectionPool/getPoolDataNames.do';
	$.ajax({  
        url:url,  
        type:'post',  
        dataType:'json',  
        success:function(data,textStatus,jqXHR){  
			initSelect(data.data);
        },  
        error:function(XMLHttpRequest,textStatus,errorThrown){  
        }                     
    });
	
}

function initSelect(array){
	var targetObject = $('#poolName');
	
	$(targetObject).empty();
	
	$(array).each(function(index,entry){
		
		if(index === 0){
			$('#maxActiveSpan').html(entry.maxActive);
			$('#maxIdleSpan').html(entry.maxIdle);
			$('#poolNameSpan').html(entry.poolName);
		}
		
		var option = $('<option></option>').append(entry.poolName);
		$(option).attr('maxActive',entry.maxActive);
		$(option).attr('maxIdle',entry.maxIdle);
		$(option).attr('value',entry.poolName);
		
		$(targetObject).append(option);
		
	});
	
	$(targetObject).on('change',function(){
		var selectOption = $(targetObject).find('option[selected="selected"]')[0];
		
		$('#maxActiveSpan').html($(selectOption).attr('maxActive'));
		$('#maxIdleSpan').html($(selectOption).attr('maxIdle'));
		$('#poolNameSpan').html($(selectOption).html());
		
		//initConnectionPoolDiv();
		
	});
}

function initConnectionPoolDiv(){
	
	var divHeight =  $('#connectionPoolDiv').height();
	divHeight = parseFloat (divHeight) -20;
	
	splineObject = new Highcharts.Chart({
        chart: {
        	renderTo : 'connectionPoolDiv',
            type: 'spline',
            animation: Highcharts.svg,
            marginRight: 10,
            height : divHeight,
            events: {
                load: st
            }
        },
        title: {
            text: 'HeapMemory Usage'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 100
        },
        yAxis: {
            title: {
                text: 'MB'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                   this.y+" MB";
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'ConnectionPoolIdle',
            data: (function () {
                var data = [];
                var time = (new Date()).getTime();
               

                for (i = -19; i <= 0; i += 1) {
                    data.push({
                        x: time + i * 1000,
                        y: 0
                    });
                }
                return data;
            }())
        },{
            name: 'ConnectionPoolActive',
            data: (function () {
                var data = [];
                var time = (new Date()).getTime();
               

                for (i = -19; i <= 0; i += 1) {
                    data.push({
                        x: time + i * 1000,
                        y: 0
                    });
                }
                return data;
            }())
        }]
    });
	
}

function st(){
	setInterval("getData()",1000);
}

function getData(){
	
 	var url = '<%=basePath%>/webframework/monitor/connectionPool/getPoolData.do?poolName='+$('#poolName').val();
	$.ajax({  
        url:url,  
        type:'post',  
        dataType:'json',  
        success:function(data,textStatus,jqXHR){  
             var serie0 = splineObject.series[0];
             var serie1 = splineObject.series[1];
             serie0.addPoint([data.data.nowTime, data.data.idleNumber], true, true);
             serie1.addPoint([data.data.nowTime, data.data.activeNumber], true, true);
        },  
        error:function(XMLHttpRequest,textStatus,errorThrown){  
        }                     
    });
}



</script>
</body>
</html>